<template>
    <div>
        <el-row >
            <el-col :span="8" style=" height:100px; background-color: white;">
                <i class="el-icon-s-opportunity" style="font-size: 40px; color:rgb(102,204,153);margin-top: 30px;text-align: center;">
                <a href="#" style="font-size: 20px; color:rgb(102,204,153);padding-top: 40px;text-align: center;" @click="show = 1">常见问题</a>
                </i>
            </el-col>
            <el-col :span="8" style="height:100px; background-color: white;">
                <i class="el-icon-s-management" style="font-size: 40px; color:rgb(232,154,190);margin-top: 30px;">
                <a href="#" style="font-size: 20px; color:rgb(232,154,190);text-align: center;" @click="show = 2">帮助文档</a> 
                </i>
                
            </el-col>
                    
            <el-col :span="8" style="height:100px; background-color: white;">
                <i class="el-icon-video-camera-solid" style="font-size: 40px; color:rgb(92,216,201);margin-top: 30px;">
                <a href="#" style="font-size: 20px; color:rgb(92,216,201);" @click="show = 3">帮助视频</a>
                </i>
            </el-col>   
               
        </el-row>
        <el-row style="float: left; margin-top: 30px;">
            <el-col style="height: 500px; width:350px; background-color: white;">
                <!-- 帮助中心 -->
                <div v-if="show == 1" style="color: rgb(102,204,153); margin-top: 40px;">
                <h1 @click="show1 = 1" >1.{{this.helpCenter[0].title}}</h1>
                <h1 @click="show1 = 2" style="margin-top: 20px;">2.{{this.helpCenter[1].title}}</h1>
                <h1 @click="show1 = 3" style="margin-top: 20px;">3.{{this.helpCenter[2].title}}</h1>
                <img style="display: flex; width:350px" src="../../assets/bg1.png" class="image">
                </div>
                <!-- 帮助文档 -->
                <div v-if="show == 2" style="color: rgb(232,154,190);">
                <h1 @click="show1 = 4" style="margin-top: 40px;">1.{{this.helpCenter[3].title}}</h1>
                <h1 @click="show1 = 5" style="margin-top: 20px;">2.{{this.helpCenter[4].title}}</h1>
                <h1 @click="show1 = 6" style="margin-top: 20px;">3.{{this.helpCenter[5].title}}</h1>
                <img style="display: flex; margin-left: 50px;" src="../../assets/bg2.png" class="image">
                </div>
                <!-- 帮助视频 -->
                <div v-if="show == 3" style="color:rgb(92,216,201);">
                <h1 @click="show1 = 7" style="margin-top: 40px;">1.{{this.helpCenter[6].title}}</h1>
                <h1 @click="show1 = 8" style="margin-top: 20px;">2.{{this.helpCenter[7].title}}</h1>
                <h1 @click="show1 = 9" style="margin-top: 20px;">3.{{this.helpCenter[8].title}}</h1>
                <img style="width:300px; display: flex; margin-left: 30px;" src="../../assets/bg3.png" class="image">
                </div>
            </el-col>
            <!-- 内容显示 -->
            <el-col style="height: 500px; width:865px; margin-left: 30px; background-color: white;">
                <div v-if="show1 == 1" style="display: flex;">
                    <div style="height: 350px; width:30%; margin-top:50px; margin-left: 70px;">
                        <el-card class="box-card" >
                        <p>{{ this.helpCenter[0].content }}</p>
                    </el-card>
                    </div>
                    <div style="height:350px; width: 30%;margin-left: 150px; margin-top:50px; float:right" >
                        <!-- <el-card class="box-card"> -->
                            <img style="height:400px;width:300px" src="../../assets/school.png" class="image">
                        <!-- </el-card> -->
                    </div>        
                </div>
                <div v-if="show1 == 2" style="display: flex;">
                    <div style="height: 350px; width:300px; margin-top:50px; margin-left: 70px;">
                        <el-card class="box-card" >
                        <p>{{ this.helpCenter[1].content }}</p>
                    </el-card>
                    </div>
                    <div style="height:350px; width: 300px;margin-left: 150px; margin-top:50px; float:right" >
                            <img style="height:400px;width:300px" src="../../assets/school2.png" class="image">
                    </div>
                    
                </div>
                <div v-if="show1 == 3"  style="display: flex;">
                    <div style="height: 350px; width:300px; margin-top:150px; margin-left: 70px;">
                        <el-card class="box-card" >
                            <p>{{ this.helpCenter[2].content }}</p>
                        </el-card>
                    </div>
                    <div style="height:350px; width: 300px;margin-left: 150px; margin-top:50px; float:right" >
                            <img style="height:400px;width:300px" src="../../assets/school3.png" class="image">
                    </div>     
                </div>
                <div v-if="show1 == 4">
                    <iframe src="https://view.officeapps.live.com/op/view.aspx?src=s167atfy1.hn-bkt.clouddn.com/class.docx" frameborder="0" width="865px" height="500px"></iframe>
                </div>
                <div v-if="show1 == 5">
                    <iframe src="https://view.officeapps.live.com/op/view.aspx?src=s167atfy1.hn-bkt.clouddn.com/safe.docx" frameborder="0" width="865px" height="500px"></iframe>
                </div>
                <div v-if="show1 == 6">
                    <iframe src="https://view.officeapps.live.com/op/view.aspx?src=s167atfy1.hn-bkt.clouddn.com/campus.docx" frameborder="0" width="865px" height="500px"></iframe>
                </div>
                <div v-if="show1 == 7">
                    <video src="http://s167atfy1.hn-bkt.clouddn.com/palette.mp4" autoplay="" controls="" width="865px" height="500px"></video>                  
                </div>
                <div v-if="show1 == 8">
                    <video src="http://s167atfy1.hn-bkt.clouddn.com/subway.mp4" autoplay="" controls="" width="865px" height="500px"></video>
                </div>
                <div v-if="show1 == 9">
                    <video src="http://s167atfy1.hn-bkt.clouddn.com/javaActive.mp4" autoplay="" controls="" width="865px" height="500px"></video>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data(){
        return{
            show:1,
            show1:1,
            helpCenter:[],
            parseSrc: "https://view.officeapps.live.com/op/view.aspx?src=",
            qiniuSrc: "s167atfy1.hn-bkt.clouddn.com/",
            src: "",
            content3: "",
            content4: "",
            content5: "",
            content6: "",
            content7: "",
            content8: "",


        }
    },
    mounted(){
        this.$axios.post("/help/findHelpContent").then(res =>{
            console.log(res.data);
            this.helpCenter = res.data.data
            this.content3 = res.data.data[3].content
            this.content4 = res.data.data[4].content
            this.content5 = res.data.data[5].content
            this.content6 = res.data.data[6].content
            console.log(this.content3);

        })
        
    },
    methods:{
        

    }
}
</script>
<style scoped>

</style>

